<template>
  <div class="app-container">
    <div class="search-container" v-hasPerm="['sys:sys-config:add']">
      <div style="margin-bottom: 10px; margin-right: 20px; display: flex; justify-content: flex-end;">
        <el-button @click="openDialog()" type="primary">
          <i-ep-plus />
          新增
        </el-button>
      </div>

    </div>


    <el-card shadow="never" class="table-container">

      <el-table
        v-loading="loading"
        :data="configList"
        stripe
        row-key="id"
        height="calc(100vh - 290px)"
      >
        <el-table-column prop="configCode" label="code" :min-width="100" align="center" />
        <el-table-column prop="configSwitch" label="开关" :min-width="100" align="center">
          <template #default="scope">
            <el-switch
              :disabled="!hasOpenOrClosePerm"
              v-model="scope.row.configSwitch"
              active-value="1"
              inactive-value="0"
              active-text="开"
              inactive-text="关"
              @change="handleSwitchChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="configDesc" label="描述" align="center" :min-width="200" />


        <el-table-column label="操作" align="center" fixed="right" :min-width="100">
          <template #default="scope">

            <el-button
              v-hasPerm="['sys:sys-config:edit']"
              type="primary"
              link
              size="small"
              @click.stop="openDialog(scope.row)"
            >
              <i-ep-edit />
              编辑
            </el-button>


          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <el-dialog
      v-model="dialog.visible"
      :title="dialog.title"
      width="500px"
      @close="closeDialog"
    >
      <el-form
        ref="dataFormRef"
        :model="formData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="code" prop="configCode">
          <el-input :disabled="formData.id" v-model="formData.configCode" placeholder="请输入code" />
        </el-form-item>
        <el-form-item label="描述" prop="configDesc">
          <el-input v-model="formData.configDesc" placeholder="请输入描述" />
        </el-form-item>
        <el-form-item label="开关" prop="configSwitch">
          <!--            <el-input-number v-model="formData.configSwitch" :min="0" :max="1" />-->
          <el-switch
            v-model="formData.configSwitch"
            active-value="1"
            inactive-value="0"
            active-text="开"
            inactive-text="关"
          />
        </el-form-item>
        <el-form-item label="备注" prop="configRemark">
          <el-input v-model="formData.configRemark" placeholder="请输入备注" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { SysConfigForm, SysConfigVO } from "@/api/config/types";
import { openOrClose, query, saveConfig, updateConfig } from "@/api/config";
import { useUserStoreHook } from "@/store";

const { perms } = useUserStoreHook().user;

const loading = ref(false);

const hasOpenOrClosePerm = perms.some(perm => perm.includes("sys:sys-config:switch"));
const configList = ref<SysConfigVO[]>();
const dialog = reactive({
  title: "",
  visible: false
});
const formData = reactive<SysConfigForm>({});

const dataFormRef = ref(ElForm);

const rules = reactive({
  configCode: [{ required: true, message: "请输入code", trigger: "blur" },
    { max: 50, message: "最大长度为50位", trigger: "blur" }]
});

onMounted(() => {
  handleQuery();
});

function openDialog(row?: SysConfigVO) {
  if (row?.id) {
    dialog.title = "修改配置类型";
    Object.assign(formData, row);
  } else {
    dialog.title = "新增配置类型";
  }

  dialog.visible = true;
}

function closeDialog() {
  dialog.visible = false;
  resetForm();
}

function resetForm() {
  dataFormRef.value.resetFields();
  dataFormRef.value.clearValidate();
  formData.id = undefined;
}

function handleSwitchChange(row: SysConfigVO) {
  console.log("handleSwitchChange", row);
  let id = row.id;
  let configSwitch = row.configSwitch;
  console.log("id:", id, ";configSwitch:", configSwitch);
  openOrClose(id, configSwitch).then(() => {
    handleQuery();
  });
}

function handleSubmit() {
  dataFormRef.value.validate((isValid: boolean) => {
    if (!isValid) {
      return;
    }
    loading.value = false;
    const id = formData.id;
    if (id) {
      updateConfig(id, formData)
        .then(() => {
          ElMessage.success("修改成功");
          closeDialog();
          handleQuery();
        })
        .finally(() => (loading.value = false));
    } else {
      saveConfig(formData)
        .then(() => {
          ElMessage.success("新增成功");
          closeDialog();
          handleQuery();
        })
        .finally(() => (loading.value = false));
    }
  });
}


/** 查询 */
function handleQuery() {
  console.log("handleQuery");
  loading.value = true;
  query()
    .then(({ data }) => {
      console.log(data);
      configList.value = data;
    })
    .finally(() => {
      loading.value = false;
    });
}


</script>
<style scoped lang="scss">

</style>
